import React from 'react';
import { inject,observer } from 'mobx-react';
import { Polyline, Marker,InfoWindow } from 'react-amap';
import './index.less';
import * as mobx from 'mobx';
import { getAntd,getEcCom,getLabel } from '../../../util/convert';

@inject('locationMapStore')
@observer
export default class Main extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
          showFlowNum: 0,//显示的流转序号
          showInfoWindowId: 0,//地图上的节点信息显示id
          searchNodeName : '',//搜索的节点名称
          instance : {}, 
          currentMapType: 'gaode'
        }
      }

    componentDidMount(){
      this.getCurrentMap();
    }
    componentWillReceiveProps() {
      this.getCurrentMap();
    }
    getCurrentMap = () => {
      let currentMapType = '';
      if(this.refs.map) {
        currentMapType = this.refs.map.getMap();
        this.setState({currentMapType});
      } 
    }

    render(){
        const { WeaMap,WeaDialogFooter,WeaLeftRightLayout,WeaCheckbox,WeaInputSearch } = getEcCom();
        const { Col, Row } = getAntd();
        const { locationMapStore } = this.props;
        const { locationInfos = [] } = locationMapStore;
        let specialobj  = locationInfos.specialobj ? mobx.toJS(locationInfos.specialobj) : [];

        const markInfo = this.generateMarkInfo(specialobj);

        const rightcom = this.getRightCom(specialobj);

        const {instance} = this.state;

        const events = {
            created: (instance) => { 
                this.setState({instance : instance});
            },
            complete: () => {
                instance.setFitView();
            }
        }

        return (
            <div className="wf-location-map">
            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@5nrt1q`}
                isNew={true}
                leftWidth={633}
                leftCom={
                    <div style={{height: 564, width: 633}}>
                        <WeaMap 
                          ecId={`${this && this.props && this.props.ecId || ''}_WeaMap@fhkzo5`} 
                          ref={(ref) => this.map = ref}
                          resizeEnable={true}  
                          events={events} 
                        >
                            {markInfo}
                        </WeaMap>
                    </div>
                }
                showBtn={false}
                >
                {rightcom}
            </WeaLeftRightLayout>
            <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@ika87c`} buttons={[]} moreBtn={this.getMoreBtns()}/>
            </div>
        )
    }

    getMoreBtns(){
        let btns = [];
        return {datas:btns};
    }

    //生成地图覆盖物结构
    generateMarkInfo = (specialobj) => {
        let { showFlowNum,showInfoWindowId, currentMapType } = this.state;
        let markInfo = [], MapMarker = null, MapPolyline = null, linePath = [], MapInfoWindow = null;
        let clickMarker = (id) =>{
            return {
                click: () => {this.setState({showInfoWindowId : id})}
            };
        };
        if(currentMapType == 'gaode') {
          MapMarker = Marker;
          MapPolyline = Polyline;
          MapInfoWindow = InfoWindow;
        } else {
          MapMarker = this.refs.map && this.refs.map.getGoogleMapFuncs().newMarker;
          MapPolyline = this.refs.map && this.refs.map.getGoogleMapFuncs().newPolyline;
          MapInfoWindow = this.refs.map && this.refs.map.getGoogleMapFuncs().newInfoWindow;
        }

        specialobj.map((obj, index) => {
            const cls = 'wea-wf-location-infoWin';
            (showFlowNum == 0 || obj.flowNum == showFlowNum) && showFlowNum != -1 && obj.locationList.map((location,locindex) => {
                const uniquekey = `${index}_${locindex}`;
                let content = `<div class='wea-map-marker'><span class='icon-coms02-Positioning'><span class='path1'></span><span class='path2'></span></span></div>`;
                // let content = `<div class='wea-map-marker'><span class='icon-coms-position'></span></div>`;
                // <span className="icon-coms02-Positioning"><span className="path1"></span><span className="path2"></span></span>
                linePath.push({latitude: location.lat, longitude: location.lng})
                markInfo.push(
                    <MapMarker ecId={`${this && this.props && this.props.ecId || ''}_Marker@9scje9@${uniquekey}`} 
                        position={{latitude: location.lat, longitude: location.lng}} 
                        content={content} 
                        events={clickMarker(location.id)} 
                        offset={[-10, -21]}
                    />
                )
                markInfo.push(
                    <MapInfoWindow ecId={`${this && this.props && this.props.ecId || ''}_InfoWindow@w1wg2c@${uniquekey}`}
                            position={{latitude: location.lat, longitude: location.lng}}
                            visible={showInfoWindowId == location.id}
                            offset={[-2, -32]}
                            isCustom
                        >
                        {/* <div className='infoWin'>
                            <div className='rodal-close' onClick={() => {this.setState({showInfoWindowId : 0})}}></div>
                            <div className='field' title={location.nodeName}>{location.nodeName}</div>
                            <div className='content'>
                                <img className='operatorimg' src={location.imgUrl} />
                                <div className='operatorname' title={location.userName}>{location.userName}</div>
                                <div className='dep' title={location.userDep}>{location.userDep}</div>
                                <div className='operatortime' title={location.time} >{location.time}</div>
                                <div className='dotedLine'></div>
                                <div className='address' title={location.address} >{getLabel(110, '地址') + ':' + location.address}</div>
                            </div>
                        </div> */}
                        <div className={cls}>
                            <div className={`${cls}-top`}>
                                <span className={`${cls}-top-title`} title={location.nodeName}>{location.nodeName}</span>
                                <div className='rodal-close' onClick={() => {this.setState({showInfoWindowId : 0})}}></div>
                            </div>
                            <div className={`${cls}-contanier`}>
                                <div className={`${cls}-msg`}>
                                    <img src={location.imgUrl} />
                                    <div className={`${cls}-msg-base`}>
                                        <div className={`${cls}-msg-base-info`}>
                                            <span className={`${cls}-msg-base-info-name`} title={location.userName}>{location.userName}</span>
                                            <span className={`${cls}-msg-base-info-dep`} title={location.userDep}>{location.userDep}</span>
                                        </div>
                                        <div className={`${cls}-msg-base-time`} title={location.time}>{location.time}</div>
                                    </div>
                                </div>
                                <div className={`${cls}-addr`} title={getLabel(110, '地址') + ':' + location.address}>{getLabel(110, '地址') + ':' + location.address}</div>
                            </div>
                        </div>
                    </MapInfoWindow>
                )
            })
        })

        markInfo.push(
            <MapPolyline ecId={`${this && this.props && this.props.ecId || ''}_Polyline@5yuiy1@1`}
                path={linePath}
                style={{
                strokeColor: '#61a8f5',
                strokeOpacity: 1,
                strokeWeight: 2,
                strokeStyle: "solid"
                }}
            />
        )
        return markInfo;
    }

    //获取右侧列表组件
    getRightCom = (specialobj) => {
        const { showFlowNum, searchNodeName, instance } = this.state;
        const { Col, Row } = getAntd();
        const { WeaInputSearch, WeaCheckbox } = getEcCom();
        let content = [];
        specialobj.map((obj, index) => {
            (searchNodeName == '' || obj.nodeName.indexOf(searchNodeName) > -1) && content.push(
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ovd73t@${index}`} className={showFlowNum == obj.flowNum ? "node-content node-content-select" : "node-content"} onClick={() => {
                    this.setState({showFlowNum : obj.flowNum});
                    setTimeout(() => {
                        instance.setFitView && instance.setFitView();
                    }, 100);
                }}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mvkech@${index}`} span={2}></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zzo5nj@${index}`} span={10}>
                        <span>{obj.flowNum}</span>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xyos4e@${index}`} className='nodeNameCol' span={10}>{obj.nodeName}</Col>
                </Row>
            )
        })

        return (
            <div className="rightcom">
                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@3w09n6`} 
                    onSearchChange={(value) => {
                        this.setState({searchNodeName : value});
                    }}
                />
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rw23vt`} className="form-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pqzqkd`} span={2}></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6d2ka5`} span={10} className='flownum-col' title={getLabel(502315, '流转顺序')}>{getLabel(502315, '流转顺序')}</Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d695nr`} span={10} title={getLabel(15586, '节点')}>{getLabel(15586, '节点')}</Col>
                </Row>
                <div className="rightcom-content">
                    {content}
                </div>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o5mau6`} className="node-content show-all-location">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@h8mzfl`} span={2}></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p7etex`} span={22}>
                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@1uq0al`}
                            id='showAll'
                            content={getLabel(126402, '查看所有位置轨迹')}
                            value={showFlowNum == 0}
                            onChange={(value) => {
                                if (value === "1") {
                                    this.setState({showFlowNum : 0, showInfoWindowId : 0});
                                    setTimeout(() => {
                                        instance.setFitView && instance.setFitView();
                                    }, 100);
                                } else {
                                    this.setState({showFlowNum : -1, showInfoWindowId : 0});
                                }
                            }}
                        />
                    </Col>
                </Row>
            </div>
        )
    }
}